<template>
    <view class="container">
        <view
                :class="whichClass(item)"
                class="roots"
                @click="handleItemClick(item)"
                :style="{ 'padding-left': paddingLeft }"
                style="display: flex; align-items: center; padding: 10px;"
        >
            <checkbox :checked="item.status === 2" @click.stop="finishTask(item)"></checkbox>
            <text class="item-title">{{ item.title }}</text>
            <view style="flex-grow: 1;"></view>
            <uni-icons
                    v-if="item.subList && item.subList.length > 0"
                    type="arrowright"
                    size="20"
                    @click.native.stop="toggleChildren"
                    :class="{ 'rotate-90': showChildren }"
            ></uni-icons>
        </view>
        <view
                v-show="showChildren"
                :class="[{
                    'fade-enter-active': showChildren,
                    'fade-leave-active': !showChildren,
                }]"
                :style="{ 'padding-left': paddingLeft }"
        >
            <tree-item
                    v-for="child in item.subList"
                    :key="child.id"
                    :item="child"
                    @on-item-click="handleItemClick"
                    :level="level + 1"
            ></tree-item>
        </view>
    </view>
</template>

<script>
    import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
    import UniDataChecklist from "../uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";

    export default {
        name: 'TreeItem',
        components: {UniDataChecklist, UniIcons},
        props: {
            item: {
                type: Object,
                required: true
            },
            level: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                showChildren: false
            };
        },
        computed: {
            paddingLeft() {
                return `${this.level * 3}vw`; // 每层增加8vw的缩进
            }
        },
        methods: {
            whichClass(item) {
                if (item.status === 1) {
                    return `level-${this.level}`;
                } else {
                    return `done`;
                }
            },
            toggleChildren() {
                this.showChildren = !this.showChildren;
            },
            handleItemClick(item) {
                this.$emit('on-item-click', item);
            },

            finishTask(item) {
                console.log("完成任务+", item.id);
                let url = '';
                if (this.$root.prefix == null) {
                    url = "/api/zwart/user/task/finish?taskId=" + item.id;
                } else {
                    url = this.$root.prefix + "/zwart/user/task/finish?taskId=" + item.id;
                }

                this.$root.sendRequest(
                        url, 'PUT', null, null,
                        () => {
                            console.log("完成ok")
                            this.$root.getListData(1);
                            this.$root.getListData(2);
                        },
                        (err) => {
                            console.log("完成失败：" + err);
                        }
                );
            }
        }
    };
</script>

<style scoped>
    .fade-enter-active {
        animation: fadeIn 0.5s;
    }

    .fade-leave-active {
        animation: fadeOut 0.5s;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    .rotate-90 {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }

    /* Additional styles for the tree item */
    .tree-item {
        /* Your styles for the tree item */
    }

    /* Additional styles for the drawer content */
    .drawer-content {
        padding-left: 8vw;
    }

    .item-title {
    //margin-left: 6vw;
    }

    checkbox {
        transform: scale(0.6);
        margin-left: 3vw;
    }

    .container {
        background-color: #fdb7b7;
    }

    .level-1 {
        background-color: #f6efff;
    }

    .level-2 {
        background-color: #cfecff;
    }

    .level-3 {
        background-color: #fdf1db;
    }

    .level-4 {
        background-color: #ef6383;
    }

    .done {
        background-color: #fdb7b7;
        color: #5d5d5d;
        position: relative;
    }

    .done::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: var(--bg-color); /* 删除线的颜色 */
        transform: translateY(-50%); /* 将横线垂直居中 */
    }
</style>
